<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>AdminLTE 2 | General Form Elements</title>
        <!-- Tell the browser to be responsive to screen width -->
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        <!-- Bootstrap 3.3.6 -->
        <link rel="stylesheet" href="/public/ui/framework/bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <!-- Font Awesome -->
        <link rel="stylesheet" href="/Public/UI/Fonts/Font-Awesome-4.7.0/css/font-awesome.min.css">
        <!-- Ionicons -->
        <link rel="stylesheet" href="/Public/UI/Fonts/ionicons-2.0.1/css/ionicons.min.css">
        <!-- Theme style -->
        <link rel="stylesheet" href="/Public/ui/adminlte/css/AdminLTE.min.css">
        <!-- AdminLTE Skins. Choose a skin from the css/skins
             folder instead of downloading all of them to reduce the load. -->
        <link rel="stylesheet" href="/Public/ui/adminlte/css/skins/_all-skins.min.css">
    </head>
    <body class="hold-transition skin-blue">
        <!-- Horizontal Form -->
        <div class="box box-primary" style="box-shadow: none;">
            <!-- /.box-header -->
            <!-- form start -->
            <form class="form-horizontal">
                <div class="box-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" name="user_name" class="form-control input-sm" placeholder="用户名" required="required" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" name="password" class="form-control input-sm" placeholder="密码" required="required" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="name" class="form-control input-sm" placeholder="姓名" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电子邮件</label>
                        <div class="col-sm-10">
                            <input type="email" name="email" class="form-control input-sm" placeholder="电子邮件" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">出生日期</label>
                        <div class="col-sm-10">
                            <input type="text" name="birthday" class="form-control input-sm" placeholder="出生日期" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">手机号码</label>
                        <div class="col-sm-10">
                            <input type="text" name="mobile" class="form-control input-sm" placeholder="手机号码" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="name" class="form-control input-sm" placeholder="姓名" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户头像</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input type="text" name="face_url" class="form-control input-sm"  placeholder="用户头像">
                                <span class="input-group-btn">
                                    <a href="../upload/delete.html?path=" class="btn btn-default btn-sm xsui-btn-singlefile-delete-image" title="删除图片">删除</a>
                                    <a href="../upload/single_file.html?name=face_url" class="btn btn-default btn-sm xsui-btn-singlefile-uploader-image" title="选择图片并上传">上传</a>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注信息</label>
                        <div class="col-sm-10">
                            <input type="text" name="remark" class="form-control input-sm"  placeholder="备注信息" size="79" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="status" id="inlineRadio1" value="1"> 开启
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="status" id="inlineRadio2" value="0"> 关闭
                            </label>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
                <div class="box-footer">
                    <button type="button" class="btn btn-default xsui-btn-close-dialog">取消</button>
                    <button type="submit" class="btn btn-primary pull-right">保存</button>
                </div>
                <!-- /.box-footer -->
            </form>
        </div>
        <!-- /.box -->
        <!-- /.content -->

        <!-- jQuery 2.2.3 -->
        <script src="/Public/UI/Plugins/jquery/jquery-2.2.3.min.js"></script>
        <!-- Bootstrap 3.3.6 -->
        <script src="/public/ui/framework/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <!-- Layer 3.0.1 -->
        <script src="/Public/UI/Plugins/DialogLib/layer-v3.0.1/layer.js"></script>
        <!-- AdminLTE App -->
        <script src="/Public/ui/adminlte/js/app.min.js"></script>
        <script>
            var xsForm = {};
            xsForm.config_iframelayer = function () {
                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                parent.layer.iframeAuto(index); //让层自适应iframe高度
                //关闭iframe
                $('.xsui-btn-close-dialog').click(function () {
                    parent.layer.close(index);
                });
            }
            xsForm.init_operate_button = function () {
                $('.xsui-btn-singlefile-uploader-image').click(function () {
                    var $btn = $(this);
                    var url = $btn.attr('href') ? $btn.attr('href') : $btn.data('url');
                    if (!url) {
                        alert('URL无效!');
                        return false;
                    }
                    var title = $btn.attr('title') ? $btn.attr('title') : $btn.text();
                    //iframe窗
                    layer.open({
                        type: 2,
                        title: title,
                        closeBtn: 1, //不显示关闭按钮
                        shade: [0],
                        //area: [options.width + 'px', options.height + 'px'],
                        area: ['50vw', '50vh'],
                        //offset: 'rb', //右下角弹出
                        //time: 2000, //2秒后自动关闭
                        maxmin: true, //开启最大化最小化按钮
                        offset: [160, 0],
                        anim: 2,
                        content: [url, 'no'], //iframe的url，no代表不显示滚动条
                    });
                    return false;
                })
                $('.xsui-btn-singlefile-delete-image').click(function () {
                    var $btn = $(this);
                    var path = $btn.parent().prev().val();
                    if ('' == path) {
                        layer.alert('无图片!');
                        return false;
                    }
                    if (!confirm('您确定要删除该图片吗?')) {
                        return false;
                    }
                    var url = $btn.attr('href') ? $btn.attr('href') : $btn.data('url');
                    $.post(url, {filepath: path}, function (data) {
                        if (data.success) {
                            $btn.parent().prev().val('');
                        } else {
                            layer.alert(data.info, {icon: 5, offset: [160, 0]});
                        }
                    })
                    return false;
                })
            }
            $(document).ready(function () {
                xsForm.config_iframelayer();
                xsForm.init_operate_button();
            })
            /**
             * 单文件上传回调函数
             * @param {type} name
             * @param {type} value
             * @returns {undefined}
             * @version 1.0 2016-12-15
             */
            function single_uploader_cb(name, value) {
                var $input = $('[name="' + name + '"]');
                $input.val(value)
                $input.parent().parent().find('img').attr('src', value).parent().attr({'href': value, 'title': value}).next().data('url', value);
                layer.closeAll();
                //$('iframe').parent().dialog('close');
            }
            /**
             * 批量文件上传回调函数
             * @param {type} name
             * @param {type} value
             * @returns {undefined}
             * @version 1.0 2016-12-15
             */
            function multi_uploader_cb(name, value) {
                var $input = $('[name="' + name + '"]');
                var str = $input.val();
                if (str.length > 0) {
                    str += '|';
                }
                str += value;
                $input.val(str);
                $('iframe').parent().dialog('close');
            }
        </script>
    </body>
</html>
